<template>
  <div>
    <input type="text" v-model="name" />
    <button @click="addPerson">添加</button>
    <button @click="addPersonWang">添加王</button>
    <h3>列表第一个人是{{ firstPersonName }}</h3>
    <ul>
      <li v-for="p in pList" :key="p.id">{{ p.name }}</li>
    </ul>
    <h3 style="color: red">count组件和是{{ sum }}</h3>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      name: "",
    };
  },
  computed: {
    sum() {
      return this.$store.state.countState.sum;
    },
    pList() {
      return this.$store.state.personState.personList;
    },
    firstPersonName() {
      return this.$store.getters["personState/firstPersonName"];
    },
  },
  methods: {
    addPerson() {
      const personObj = { name: this.name, id: Date.now() };
      this.$store.commit("personState/ADDPERSON", personObj);
      this.name = "";
    },
    addPersonWang() {
      const personObj = { name: this.name, id: Date.now() };
      this.$store.dispatch("personState/addPersonWang", personObj);
      this.name = "";
    },
  },
};
</script>

<style>
</style>